<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id='box'>
        <h3>购物车列表</h3>
        <ul>
            <li v-for="(item,index) in arr" :key="item.id">
                {{item.name}} ￥{{item.price | n1}}
                <button @click="add(item.id)">添加到购物车</button>
            </li>
        </ul>


        <h3>购物车列表</h3>
        <ul>
            <li v-for="(item,index) in arr1" :key="item.id">
                <input type="checkbox" v-model="item.is">
                {{item.name}} ￥{{item.price | n1}}
                <button @click="jia(item.id)">＋</button>
                <span>{{item.num}}</span>
                <button @click="jian(item.id)">-</button>
                <button @click="del(index)">删除</button>
            </li>
        </ul>

        清空购物车<button @click="kong()">清空购物车</button>
        <p>{{zongjia | n1}}</p>总价<br>
        <button>去结算</button>
    </div>


    <script>
        new Vue({
            el: '#box',
            data: {
                arr: [
                    { id: 1, name: '手机', price: 10000 },
                    { id: 2, name: '平板', price: 20000 },
                    { id: 3, name: '电脑', price: 30000 },
                ],
                arr1: [],
            },
            methods: {
                // 添加商品
                add(id) {
                    let a = this.arr.find(item => item.id == id)
                    let b = this.arr1.find(item => item.id == id)
                    if (b) {
                        b.num++
                    } else {
                        this.arr1.push({
                            id: a.id,
                            name: a.name,
                            price: a.price,
                            num: 1,
                            is: false
                        })
                    }
                },

                // 删除商品
                del(index) {
                    this.arr1.splice(index, 1)
                },

                // 数量增加
                jia(id) {
                    let b = this.arr1.find(item => item.id == id)
                    if (b) {
                        b.num++
                    }
                },

                // 数量减少
                jian(id) {
                    let b = this.arr1.find(item => item.id == id);
                    if (b) {
                        if (b.num > 1) {
                            b.num--;
                        } else {
                            let index = this.arr1.indexOf(b);
                            this.arr1.splice(index, 1);
                        }
                    }
                },
                // 清空购物车
                kong() {
                    this.arr1 = []
                }
            },

            computed: {
                // 计算总价
               zongjia() {
                    return this.arr1.filter(item => item.is)
                        .reduce((sum, item) => sum + item.price * item.num, 0);
                }
            },
            filters: {
                n1(b) {
                    let str = b.toString();
                    return str.slice(0, -2) + '.00';
                }
            }
        })
    </script>
</body>

</html>